<template>
  <div class="">
    <a-card class="custom-card">
      <div ref="searchRef">

      </div>
      <div class="table-header mb-2">

      </div>
      <div ref="tableContainerRef">
        <a-table
          ref="tableRef"
          row-key="id"
          :loading="loading"
          :pagination="false"
          :data="renderData"
          :bordered="{ wrapper: true, cell: true }"
          :scroll="tableScroll"
          span-all
          column-resizable
        >
          <template #columns>
            <a-table-column title="XXX1" data-index="xxx1" align="center" :width="130"/>
            <a-table-column title="XXX2" data-index="xxx2" align="center" :width="100"/>
            <a-table-column title="XXXX3" data-index="xxxx3" align="center" :width="95"/>
            <a-table-column title="XXXX表" align="center">
              <a-table-column title="华南" align="center">
                <a-table-column title="" data-index="south_empty" align="center" :width="95">
                </a-table-column>
                <a-table-column title="周一" data-index="south_week1" align="center" :width="95">
                </a-table-column>
                <a-table-column title="周二" data-index="south_week2" align="center" :width="65">
                </a-table-column>
                <a-table-column title="周三" data-index="south_week3" align="center" :width="65">
                </a-table-column>
                <a-table-column title="周四" data-index="south_week4" align="center" :width="65">
                </a-table-column>
                <a-table-column title="周五" data-index="south_week5" align="center" :width="65">
                </a-table-column>
                <a-table-column title="周六" data-index="south_week6" align="center" :width="65">
                </a-table-column>
                <a-table-column title="周日" data-index="south_week7" align="center" :width="65">
                </a-table-column>
              </a-table-column>
              <a-table-column title="华东" align="center">
                <a-table-column title="" data-index="east_empty" align="center" :width="95">
                </a-table-column>
                <a-table-column title="周一" data-index="east_week1" align="center" :width="95">
                </a-table-column>
                <a-table-column title="周二" data-index="east_week2" align="center" :width="65">
                </a-table-column>
                <a-table-column title="周三" data-index="east_week3" align="center" :width="65">
                </a-table-column>
                <a-table-column title="周四" data-index="east_week4" align="center" :width="65">
                </a-table-column>
                <a-table-column title="周五" data-index="east_week5" align="center" :width="65">
                </a-table-column>
                <a-table-column title="周六" data-index="east_week6" align="center" :width="65">
                </a-table-column>
                <a-table-column title="周日" data-index="east_week7" align="center" :width="65">
                </a-table-column>
              </a-table-column>
            </a-table-column>
          </template>
        </a-table>
      </div>
      <div class="table-footer mt-2">

      </div>
    </a-card>
  </div>
</template>

<script setup>
  import { ref, reactive, h, compile, nextTick, onMounted, onUnmounted } from 'vue';

  import useLoading from '@/hooks/loading';
  import { workAreaHeight } from '@/utils/index';

  const { loading, setLoading } = useLoading(false);
  const renderData = ref([]);
  const tableScroll = ref({
    x: '100%',
    y: '100%',
  });

  const searchRef = ref();
  const showSearch = ref(true);
  const tableContainerRef = ref();
  const tableRef = ref();
  const searchHeight = ref(0);

  const settingFixedPage = () => {
    const workHeight = workAreaHeight();
    const tableHeight = workHeight - searchHeight.value;
    tableContainerRef.value.style.height = `${tableHeight}px`;
  };
  const resizeHandler = () => {
    searchHeight.value = searchRef.value.offsetHeight;
    settingFixedPage();
  };
  const toggleSearch = async () => {
    const dom = searchRef.value?.style;
    if (dom) {
      showSearch.value = !showSearch.value;
      await nextTick(() => {
        searchHeight.value = searchRef.value.offsetHeight;
        settingFixedPage();
      });
    }
  };
  const setTableColumns = () => {

  };

  // 列表
  const fetchData = async () => {
    setLoading(true);
    const data = [
      {
        id: 1,
        xxx1: 'CCC1(cccc）',
        xxx2: 'OoO1',
        xxxx3: 'OoO',
        south_empty: 'MMM1',
        south_week1: '',
        south_week2: '',
        south_week3: '',
        south_week4: '',
        south_week5: '√',
        south_week6: '√',
        south_week7: '',
        east_empty: 'MMM2',
        east_week1: '',
        east_week2: '',
        east_week3: '',
        east_week4: '√',
        east_week5: '',
        east_week6: '√',
        east_week7: '',
      },
      {
        id: 2,
        xxx1: 'CCC1(cccc）',
        xxx2: 'OoO2',
        xxxx3: 'OoO',
        south_empty: 'MMM3',
        south_week1: '',
        south_week2: '',
        south_week3: '',
        south_week4: '',
        south_week5: '√',
        south_week6: '√',
        south_week7: '',
        east_empty: 'MMM4',
        east_week1: '',
        east_week2: '',
        east_week3: '',
        east_week4: '',
        east_week5: '',
        east_week6: '√',
        east_week7: '',
      },
      {
        id: 3,
        xxx1: 'CCC1(cccc）',
        xxx2: 'OoO3',
        xxxx3: 'OoO',
        south_empty: 'MMM5',
        south_week1: '',
        south_week2: '',
        south_week3: '',
        south_week4: '',
        south_week5: '√',
        south_week6: '√',
        south_week7: '',
        east_empty: 'MMM6',
        east_week1: '',
        east_week2: '',
        east_week3: '',
        east_week4: '√',
        east_week5: '',
        east_week6: '√',
        east_week7: '',
      },
      {
        id: 4,
        xxx1: 'SSS1(ssss）',
        xxx2: 'KkK1',
        xxxx3: 'KkK',
        south_empty: 'HHH1',
        south_week1: '',
        south_week2: '',
        south_week3: '√',
        south_week4: '',
        south_week5: '',
        south_week6: '√',
        south_week7: '',
        east_empty: '*',
        east_week1: '',
        east_week2: '',
        east_week3: '',
        east_week4: '',
        east_week5: '',
        east_week6: '',
        east_week7: '',
      },
      {
        id: 5,
        xxx1: 'SSS1(ssss）',
        xxx2: 'KkK2',
        xxxx3: 'KkK',
        south_empty: 'HHH3',
        south_week1: '',
        south_week2: '',
        south_week3: '√',
        south_week4: '',
        south_week5: '√',
        south_week6: '',
        south_week7: '',
        east_empty: 'HHH4',
        east_week1: '',
        east_week2: '',
        east_week3: '√',
        east_week4: '',
        east_week5: '',
        east_week6: '√',
        east_week7: '',
      },
      {
        id: 6,
        xxx1: 'SSS1(ssss）',
        xxx2: 'KkK3',
        xxxx3: 'KkK',
        south_empty: 'HHH5',
        south_week1: '',
        south_week2: '',
        south_week3: '',
        south_week4: '',
        south_week5: '√',
        south_week6: '√',
        south_week7: '',
        east_empty: 'HHH6',
        east_week1: '',
        east_week2: '',
        east_week3: '',
        east_week4: '',
        east_week5: '√',
        east_week6: '√',
        east_week7: '',
      },
    ];
    renderData.value = data;
    setLoading(false);
  };
  // 合并单元格
  const spanMethod = (data) => {
    const { column, columnIndex, record, rowIndex } = data;
    if (columnIndex === 0 && (rowIndex === 0 || rowIndex === 3)) {
      return {
        rowspan: 3,
      };
    }
    if (columnIndex === 2 && (rowIndex === 0 || rowIndex === 3)) {
      return {
        rowspan: 3,
      };
    }
    return undefined;
  };

  onMounted(async () => {
    await fetchData();
    window.addEventListener('resize', resizeHandler, false);
    searchHeight.value = searchRef.value.offsetHeight;
    settingFixedPage();
  });
  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler, false);
  });
</script>

<script>
  export default {
    name: 'TestTable',
  };
</script>

<style scoped lang="less">

</style>
